Skip to content

Add InvoiceReceipt template and update rendering modes to replace the hardcoded mode:email#45

Merged
ivoIturrieta merged 1 commit into
unlayer:mainfrom
yeabwang:feature/invoice-pdf-example
Jul 15, 2026
Merged

Add InvoiceReceipt template and update rendering modes to replace the hardcoded mode:email#45
ivoIturrieta merged 1 commit into
unlayer:mainfrom
yeabwang:feature/invoice-pdf-example

Conversation

@yeabwang

Copy link
Copy Markdown
Contributor

Summary

Adds a print-ready invoice/receipt template and renders each demo template using its configured mode. Addressing #20

Changes

  • Added a document-mode invoice template suitable for PDF generation
  • Added document template categorization and mode labels
  • Replaced the hardcoded email render mode with per-template configuration

Test Plan

  • pnpm build passes
  • pnpm test passes
  • Tested in Storybook (if UI change)
  • Added/updated tests for new behavior

Notes

Any additional context for reviewers.

@codecov

codecov Bot commented Jul 13, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 95.50%. Comparing base (743b375) to head (cf663e1).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main      #45   +/-   ##
=======================================
  Coverage   95.50%   95.50%           
=======================================
  Files          31       31           
  Lines        1937     1937           
  Branches      382      382           
=======================================
  Hits         1850     1850           
  Misses         86       86           
  Partials        1        1           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@ivoIturrieta

Copy link
Copy Markdown
Collaborator

Thanks for the PR! Overall, the implementation looks good. The project builds successfully, all tests pass, and the invoice renders correctly in the demo using Document mode.

I tested the PDF generation workflow shown in the example. When exported as A4, the pagination isn’t clean: the main invoice appears on page 1, the footer moves to a mostly empty page 2, and page 3 is blank.

Since the template is described as print-ready, this pagination issue is worth taking a look at. Otherwise, the invoice component and rendering-mode changes look good.

@yeabwang

Copy link
Copy Markdown
Contributor Author

@ivoIturrieta Fixed. Please check :)

@ivoIturrieta

Copy link
Copy Markdown
Collaborator

@yeabwang Thanks for the update! I traced the trailing page break and it comes from the document body renderer in @unlayer/exporters. We’ll address that upstream in the editor/export pipeline, so please remove the shared Body.tsx change and its related test/snapshot updates from this PR. The invoice template and per-template rendering-mode changes can remain.

For PDF generation in the meantime, consumers can use renderToJson() to create Unlayer-compatible design JSON and send it to the Cloud API’s PDF export endpoint from their backend. The API key must remain server-side.

Examples:

@yeabwang
yeabwang force-pushed the feature/invoice-pdf-example branch from b689c8e to cf663e1 Compare July 15, 2026 15:40
@yeabwang

Copy link
Copy Markdown
Contributor Author

@ivoIturrieta Okay I've updated as requested including removal of the previous Puppeteer based one. One thing to bring to your attention the Cloud API PDF export API display mode doesn't have document and it only supports "email" "web" "popup" so defaulted to web. I've checked the web and pdf version of the invoice, the web one render as expected, but the pdf one has the trailing page issue but since you said it will be fixed upstream I left it as it is. If there are any issues happy to address them :)

@ivoIturrieta ivoIturrieta left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! thanks for the contribution

@ivoIturrieta
ivoIturrieta merged commit ac7140a into unlayer:main Jul 15, 2026
3 of 4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants